<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-图书添加删除案例</title>
    <style>
        .main{
            margin: 20px auto;
            width: 500px;
        }
        table{
            width: 500px;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid #ccc;
        }
    </style>
    <script src="./js/ajax.js"></script>
</head>
<body>
    <div class="main">
        <div class="add">
            <p>
                书名：<input type="text" id="book">
            </p>
            <p>
                作者：<input type="text" name="" id="author">
            </p>
            <p>
                出版社： <input type="text" name="" id="publisher">
            </p>
            <button class="btn">添加图书</button>
        </div>
        <table>
            <thead>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </thead>

            <tbody>

            </tbody>
        </table>
    </div>

    
    <script>
        
        var tbody = document.querySelector('tbody')
        // 从服务器中获取数据渲染到页面上
        function getBookList(){
            $http({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                success: function(res){
                    // 每当重新渲染时 先清空页面
                    tbody.innerHTML = '';

                    // 把json字符串转换为对象
                    var data = JSON.parse(res);
                    
                    // 展示到页面上
                    data.data.forEach(value=>{
                        var tr = document.createElement('tr');
                        tr.innerHTML = `
                            <td>${value.id}</td>
                            <td>${value.bookname}</td>
                            <td>${value.author}</td>
                            <td>${value.publisher}</td>
                            <td>
                                <a href='javascript:;' class='del' id=${value.id}>删除</a>
                            </td>
                        `
                        tbody.appendChild(tr);
                    })

                    // 删除
                    var del = document.querySelectorAll(".del");
                    for(var i = 0; i < del.length; i++){
                        del[i].addEventListener('click', function(){
                            $http({
                                method:'GET',
                                url:'http://www.liulongbin.top:3006/api/delbook',
                                data:{
                                    id:this.id  // 传输对应点击的id
                                },
                                success:function(res){
                                    // console.log(res, '1')    // res 是一个json字符串
                                    var data = JSON.parse(res);
                                    if(data.status === 200){
                                        getBookList()
                                        alert(data.msg)
                                    }
                                    else return alert(data.msg);
                                }
                            })
                        })
                    }

                }   
            })
        }

        // 渲染
        getBookList();

        var btn = document.querySelector('.btn');
        var bookName = document.querySelector('#book');
        var author = document.querySelector('#author');
        var publisher = document.querySelector('#publisher');
        // 添加书籍到服务器上
        btn.addEventListener('click', function(){
            var bName = bookName.value;
            var authors = author.value;
            var publish = publisher.value;

            $http({
                method:'POST',
                url:'http://www.liulongbin.top:3006/api/addbook',
                data:{
                    bookname: bName,
                    author: authors,
                    publisher: publish
                },
                success:function(res){
                    console.log(res);
                    var data = JSON.parse(res); // 将json字符串转换为对象
                    if(data.status === 201){
                        // 重新渲染
                        getBookList();
                    }else{
                        alert(data.msg);
                    }
                }
            })
        })

        
    </script>
</body>
</html>